<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>录入</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../css/font.css">
        <link rel="stylesheet" href="../css/xadmin.css">
        <script src="../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../js/xadmin.js"></script>
        <script src="../lib/axios.min.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form" id="mainForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">全宗名称</label>
                        <div class="layui-input-inline">
                            <div id="qzc"></div>
                        </div>
                        <label class="layui-form-label">档案类型</label>
                        <div class="layui-input-inline">
                            <div id="view"></div>
                        </div>
                    </div>
            <br/>
                    <div id="view_"></div>
                    <div class="layui-form-item">
                        <label for="L_repass" class="layui-form-label">
                        </label>
                        <button  class="layui-btn" lay-filter="add" lay-submit="">
                            保存
                        </button>
                    </div>
                </form>
            </div>
            <br/>
            <div class="layui-row">         
                <div class="layui-card">
                    <div class="layui-card-header">
                        <label class="layui-form-label">录入结果</label>
                    </div>
                <div class="layui-card-body">
                    <table class="layui-table" id="result"></table>
                </div>
            </div>
        </div>
        <script id="qzm" type="text/html">
            <select name="qid" id="qid" lay-filter="qzType">
                {{#  layui.each(qz, function(index, item){ }}
                <option value="{{item.qid}}">{{item.title}}</option>
                {{#  }); }}
                {{#  if(qz.length === 0){ }}
                    无数据
                {{#  } }}
            </select>
        </script>
        <script id="demo" type="text/html">
            <select name="kid" id="kid" lay-filter="kindType">
                {{#  layui.each(kind, function(index, item){ }}
                <option value="{{item.kid}}">{{item.kname}}</option>
                {{#  }); }}
                {{#  if(kind.length === 0){ }}
                无数据
                {{#  } }}
            </select>
        </script>
        <script type="text/html" id="demo_">
            <div class="layui-row">
                {{# var i = 0; }}
                {{# layui.each(kin, function(index, item){ }}
                    {{# if(item.type == "1" || item.type == "3"){ }}
                    <div class="layui-form-item">
                    {{# }else{ i=i+1; }}
                    {{# if(i%3 == 0 || i == 1){ }}
                    <div class="layui-form-item">
                    {{# } } }}
                    {{# if(item.required){item.required="required" }}
                    <label for="{{item.field}}" class="layui-form-label">
                        <span class="x-red">*</span>{{item.title}}
                    </label>
                    {{# }else{ }}
                    <label for="{{item.field}}" class="layui-form-label">
                        {{item.title}}
                    </label>
                    {{# } }}
                    
                    {{# switch(item.type){
                    case "0":}}
                    <div class="layui-input-inline">
                        <input name="{{item.field}}" class="layui-input" lay-verify="{{item.required}}">
                    </div>
                    {{# break;
                    case "1":}}
                    <div class="layui-input-block">
                        <input name="{{item.field}}" class="layui-input" autocomplete="on" lay-verify="{{item.required}}">
                    </div>
                    {{# break;
                    case "2":}}
                    <div class="layui-input-inline">
                        <select name="{{item.field}}" class="layui-input" lay-verify="{{item.required}}">
                        {{# layui.each(item.oval, function(inde, ite){ }}
                        <option value="{{ite.val}}">{{ite.tit}}</option>
                        {{# }); }}
                        {{#  if(item.oval.length === 0){ }}
                            无数据
                        {{#  } }}
                        </select>
                    </div>
                    {{# break;
                    case "3":}}
                    <div class="layui-input-block">
                        <textarea name="{{item.field}}" class="layui-textarea" lay-verify="{{item.required}}"></textarea>
                    </div>
                    {{# break;
                    default:}}
                    <div class="layui-input-inline">
                        <input name="{{item.field}}" class="layui-input" required lay-verify="required">
                    <div>
                    {{# break;
                        } }}
                
                    {{# if(item.type=="1" || item.type=="3"){ }}
                    </div>
                    {{# }else{ if(i%3 == 2){ }}
                    </div>
                    {{# } } }}

                {{#  }); }}
                {{#  if(kin.length === 0){ }}
                    无数据
                {{#  } }}
            </div>
        </script>

        <script type="text/html" id="bar">
            <a title="编辑" onclick="da_edit()" href="javascript:;">
            <i class="layui-icon">&#xe642;</i></a>
            <a title="删除" onclick="da_del()" href="javascript:;">
            <i class="layui-icon">&#xe640;</i></a>
        </script>
        <script type="text/javascript">
            var kind= [];
            var kin= [];
            var qz = [];
            //初始
            axios.get('/api/get_q').then(res=>{
                for (var i in res.data){
                    if (res.data[i].th >= 0){
                        qz.push(res.data[i]);
                    }
                };

                layui.use(['laytpl','form', 'table'], function(){
                    var laytpl = layui.laytpl
                    ,form = layui.form
                    ,table = layui.table;
                    var getTplq = qzm.innerHTML
                    ,qzc = document.getElementById('qzc');
                    laytpl(getTplq).render(qz, function(html){
                        qzc.innerHTML = html;
                    });

                    var a = {qid: qz[0].qid}
                    axios.post('/api/get_k_q', a).then(res=>{
                        kind = res.data;
                        kin = kind[0].head;
                        var getTplk = demo.innerHTML
                        ,view = document.getElementById('view');
                        laytpl(getTplk).render(kind, function(html){
                            view.innerHTML = html;
                        });
                        form.render('select');
                        var getTpl = demo_.innerHTML
                        ,view_ = document.getElementById('view_');
                    
                        var j = [];
                        for (var i in kin){
                            if (kin[i].type == "2"){
                                j.push({index: i, title: kin[i].field});
                            }
                        }
                        axios.post("/api/get_ko", {oid: kind[0].kid}).then(res=>{
                            var op = res.data;
                            for (var k in j){
                                for (var z in op){
                                    if(j[k].title == op[z].okey){
                                        kin[Number(j[k].index)].oval = op[z].ovalue;
                                    }
                                }
                            }
                            laytpl(getTpl).render(kin, function(html){
                                view_.innerHTML = html;
                            });
                            form.render();
                        })
                    });
                    //选择全宗
                    form.on('select(qzType)', function(data){
                        var qval = Number(data.value);
                        var a = {
                            qid: qval
                        }
                        axios.post('/api/get_k_q', a).then(res=>{
                            kind = res.data;
                            kin = kind[0].head;
                            var getTplk = demo.innerHTML
                            ,view = document.getElementById('view');
                            laytpl(getTplk).render(kind, function(html){
                                view.innerHTML = html;
                            });
                            form.render('select');

                            var getTpl = demo_.innerHTML
                            ,view_ = document.getElementById('view_');
                            var j = [];
                            for (var i in kin){
                                if (kin[i].type == "2"){
                                    j.push({index: i, title: kin[i].field});
                                }
                            }
                            axios.post("/api/get_ko", {oid: kind[0].kid}).then(res=>{
                                var op = res.data;
                                for (var k in j){
                                    for (var z in op){
                                        if(j[k].title == op[z].okey){
                                            kin[Number(j[k].index)].oval = op[z].ovalue;
                                        }
                                    }
                                }
                                laytpl(getTpl).render(kin, function(html){
                                    view_.innerHTML = html;
                                });
                                form.render();
                            })
                            
                        })
                    });
                    //选择类型
                    form.on('select(kindType)', function(dat){
                        var val = Number(dat.value);
                        kin = kind.filter(item=>{
                            return item.kid == val;
                        });
                        kin = kin[0].head;
                        var getTpl = demo_.innerHTML
                        ,view_ = document.getElementById('view_');
                        var j = [];
                        for (var i in kin){
                            if (kin[i].type == "2"){
                                j.push({index: i, title: kin[i].field});
                            }
                        }
                        axios.post("/api/get_ko", {oid: kind[0].kid}).then(res=>{
                            var op = res.data;
                            for (var k in j){
                                for (var z in op){
                                    if(j[k].title == op[z].okey){
                                        kin[Number(j[k].index)].oval = op[z].ovalue;
                                    }
                                }
                            }
                            laytpl(getTpl).render(kin, function(html){
                                view_.innerHTML = html;
                            });
                            form.render();
                        })
                        laytpl(getTpl).render(kin, function(html){
                            view_.innerHTML = html;
                        });
   
                    });
                })
            })
        </script>
   
    </body>

</html>
<script>
    var did;
    var da;
    layui.config({
        base: '../lib/layui/layui-expand/' //插件路径
    }).extend({
        enhanceform: 'enhanceform'
    });
    layui.use(['form', 'table', 'enhanceform'], function() {
        var form = layui.form
        ,table = layui.table
        ,enhanceForm = layui.enhanceform;
        var enhance = new enhanceForm({
            elem: '#mainForm'
        });
        form.on('submit(add)', function(data) {
            var formData = data.field;
            da = formData;
            var id = Number(formData.kid);
            delete(formData.qid);
            delete(formData.kid);
            var dat = {'kid': id, 'body': formData};
            axios.post('/api/add_d', dat).then(function(res) {
                da = res.data;
                da.body.ctime = da.ctime;
                da.body.usrn = da.usrn;
                did = da.did;
                function pad(num, n) {  
                    var len = num.toString().length;  
                    while(len < n) {  
                        num = "0" + num;  
                        len++;  
                    }  
                    return num;  
                }
                for (var i in kin){
                    switch (kin[i].addto){
                        case "0":
                            formData[kin[i].field] = "";
                            break;
                        case "2":
                            var wei = formData[kin[i].field].length;
                            formData[kin[i].field] = pad(Number(formData[kin[i].field])+1,wei);
                            break;
                    };
                }
                enhance.filling(formData);
                axios.post('/api/get_kl', {'kid': id}).then(res=> {
                    head = res.data;
                    head.push({field: '', title: '操作', toolbar: "#bar"});
                    layui.use('table', function() {
                        var table = layui.table;
                        table.render({
                            elem: "#result"
                            ,cols: [head]
                            ,data: [da.body]
                            ,cellMinWidth: 50
                        });
                    })
                })
            })
            return false;
        });
    });
    function da_del() {
        layer.confirm('确认要删除档案类型吗？',function(index){
            axios.post("/api/del_d", {'did': did}).then(res=>{
                layui.use('table', function(){
                    layui.table.reload('result', {
                        data: []
                    })
                })
                layer.msg("删除成功！");
            })
        })
    }
    function da_edit() {
        layui.use(['form', 'table', 'enhanceform'], function() {
            var form = layui.form
            ,table = layui.table
            ,enhanceForm = layui.enhanceform;
            var enhance = new enhanceForm({
                elem: '#mainForm'
            });
            axios.post("/api/del_d", {'did': did}).then(res=>{
                layui.use('table', function(){
                    layui.table.reload('result', {
                        data: []
                    })
                })
                enhance.filling(da);
                layer.msg("撤销成功，重新编辑！");
            })
        })
    }
</script>